<script setup lang="ts">
import {reactive, ref} from "vue";
import DlgCompanyCreateOrEdit from "./DlgcompanyCreateOrEdit.vue";
import {CompanyType, getCompanyList} from "../../api/companies.ts";


const companyData = ref<CompanyType[]>(
    [] as CompanyType[]
)
const getList = async () => {
  await getCompanyList().then(res => companyData.value = res.data)
}

const handleDelete = async (id: string) => {
  console.log(id)
}

getList();

const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const dlgCreateOrEdit = ref<InstanceType<typeof DlgCompanyCreateOrEdit>>()

</script>

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <h3>公司管理</h3>
        <el-button class="button" type="primary"
                   @click="() => dlgCreateOrEdit?.initAndShow(0)">
          添加公司
        </el-button>
      </div>
      <div class="query">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="按照公司名称进行查询">
            <el-input v-model="formInline.user" placeholder="输入公司名称" clearable/>
          </el-form-item>
          <el-form-item label="按照ID进行查询">
            <el-input v-model="formInline.user" placeholder="输入公司id" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>

    <el-table :data="companyData" style="width: 100%">
      <el-table-column prop="id" label="id"/>
      <el-table-column prop="name" label="公司名称"/>
      <el-table-column prop="ImgPth" label="公司图片路径"/>
      <el-table-column prop="" label="表格操作" v-slot="{row}">
        <el-button type="success" @click="() => handleDelete(row.id)">查看详情</el-button>
        <el-button type="danger">删除</el-button>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="100"/>
  </el-card>
  <dlg-company-create-or-edit ref="dlgCreateOrEdit"/>
</template>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  width: auto;
}

.el-pagination {
  margin-top: 20px;
  justify-content: center;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.query {
  margin-top: 20px;
}
</style>